<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse; 
      }
      td, th {
         padding: 10px;
      }
   </style>
</head>
<body onload="convert();">
   <h3> VirtualLan Endpoints: </h3>
   <div id="container"></div>
   <script>

      setInterval(convert, 5000)

      // Function to convert JSON data to HTML table
      function convert() {

         // Sample JSON data
         let jsonData = []
         fetch("/endpoints")
         .then(res => res.json())
         .then(out =>
           {
            jsonData = out

            // Get the container element where the table will be inserted
            let container = document.getElementById("container");

            // Create the table element
            if (document.contains(document.getElementById("table"))) {
               document.getElementById("table").remove();
            }
            let table = document.createElement("table");
            table.setAttribute("id", "table")

            // Get the keys (column names) of the first object in the JSON data
            if (jsonData) {
            let cols = Object.keys(jsonData[0]);

            // Create the header element
            let thead = document.createElement("thead");
            let tr = document.createElement("tr");

            // Loop through the column names and create header cells
            cols.forEach((item) => {
               let th = document.createElement("th");
               th.innerText = item; // Set the column name as the text of the header cell
               tr.appendChild(th); // Append the header cell to the header row
            });
            thead.appendChild(tr); // Append the header row to the header
            table.append(tr) // Append the header to the table

            // Loop through the JSON data and create table rows
            jsonData.forEach((item) => {
               let tr = document.createElement("tr");

               // Get the values of the current object in the JSON data
               let vals = Object.values(item);

               // Loop through the values and create table cells
               vals.forEach((elem) => {
                  let td = document.createElement("td");
                  td.innerText = elem; // Set the value as the text of the table cell
                  tr.appendChild(td); // Append the table cell to the table row
               });
               table.appendChild(tr); // Append the table row to the table
            });
            container.appendChild(table) // Append the table to the container element
            }
         })
         .catch(err => { throw err });
      }
   </script>
</body>
</html>
